<template>
	<view class="content">
		<view class="productphotos">
			<!-- <image :src="goodsInfo.picture" mode=""></image> -->
			<swiper style="height: 680rpx;" indicator-dots indicator-active-color="#FFFFFF" circular autoplay>
				<swiper-item v-for="(item,index) in pictureArray" :key="index">
					<image :src="item"></image>
				</swiper-item>
				<!-- 	<image src="../../static/307.png" mode=""></image> -->
			</swiper>
		</view>
		<view class="productcontent">
			<view class="number">
				<view class="people" v-if="isVip==1">
					<view class="hong" v-if="goodsInfo.presentPrice>0"> 会员价:￥{{goodsInfo.presentPrice}}
					</view>
					<view class="hui" v-if="goodsInfo.goodsSpecificationsList[0].srcPrice>0">
						零售价:￥{{goodsInfo.goodsSpecificationsList[0].srcPrice}}
					</view>
				</view>
				<view class="people" v-if="isVip==0">
					<view class=" hong" v-if="goodsInfo.goodsSpecificationsList[0].srcPrice>0">
						零售价:￥{{goodsInfo.goodsSpecificationsList[0].srcPrice}}
					</view>
					<view class="hui" v-if="goodsInfo.presentPrice>0"> 会员价:￥{{goodsInfo.presentPrice}}
					</view>
				</view>
				<!-- <view class="money">
					<image src="../../static/311.png" mode=""></image>
					<view class="moneytext">收藏</view>
				</view> -->
			</view>
			<view class="name">
				{{goodsInfo.name}}
			</view>
			<view class="number">
				<view class="people">
					<view class="describe" v-if="goodsInfo.shortDescription&&goodsInfo.shortDescription!=null">
						描述：{{goodsInfo.shortDescription}}
					</view>
				</view>
			</view>
			<view class="number">
				<view class="people">
					{{goodsInfo.saleNum}}人购买
				</view>
				<!-- <view class="money">
					<text>￥</text>
					654.
					<text>00</text>
				</view> -->
			</view>
			<!-- 			<view class="teacher">
				<view class="teacherinformation">
					<view class="teacherimg">
						<image src="../../static/303.png" mode=""></image>
					</view>
					<view class="teachername">
						王闯老师
					</view>
				</view>
				<view class="briefintroduction">
					老师简介老师简介老师简介老师简介老师简老师简介老师简介老师简介介
				</view>
			</view> -->
			<view class="information">
				<view class="xiangmubox">
					<rich-text class="notice-content" style="font-size:0"
						:nodes="format(goodsInfo.goodDetail)"></rich-text>
				</view>
			</view>
		</view>
		<view class="lowerpart">
			<view class="lowerpartimg">
				<view class="collect">
					<image v-if="isCollect == 1" src="../../static/311.png" mode="" @click="addCollecta(2)">
					</image>
					<image v-if="isCollect == 2" src="../../static/313.png" mode="" @click="addCollecta(1)">
					</image>
					<view class="collecttext"> 收藏 </view>
				</view>
				<!-- 	<view class="collect" @click="dial">
					<image src="../../static/318.png" mode=""></image>
					<view class="collecttext">
						咨询
					</view>
				</view> -->
			</view>
			<view class="lowerparttext">
				<view class="shoppingcart" @click="open(1)"> 加入购物车 </view>
				<view class="purchase" @click="open(2)"> 确认 </view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="22px 22px 0 0">
			<view class="exchange">
				<view class="fillin">
					<view class="fillinimg">
						<image :src="goodsInfo.goodsSpecificationsList[guigeindex].picture.split(',')[0]" mode="">
						</image>
					</view>
					<view class="fillinname">
						<view class="goldcoin" v-if="isVip==1">
							<view class="hong" v-if="goodsInfo.goodsSpecificationsList[guigeindex].price>0">
								￥{{goodsInfo.goodsSpecificationsList[guigeindex].price}}
							</view>
							<view class="hui" v-if="goodsInfo.goodsSpecificationsList[guigeindex].srcPrice>0">
								￥{{goodsInfo.goodsSpecificationsList[guigeindex].srcPrice}}
							</view>
						</view>
						<view class="goldcoin" v-if="isVip==0">
							<view class=" hong" v-if="goodsInfo.goodsSpecificationsList[guigeindex].srcPrice>0">
								￥{{goodsInfo.goodsSpecificationsList[guigeindex].srcPrice}}
							</view>
							<view class="hui" v-if="goodsInfo.goodsSpecificationsList[guigeindex].price>0">
								￥{{goodsInfo.goodsSpecificationsList[guigeindex].price}}
							</view>
						</view>
						<view class="refund"> 七天无理由退货 </view>
					</view>
				</view>
				<view class="specifications">
					<view class="specificationsname"> 规格 </view>
					<view class="specificationsul">
						<scroll-view :scroll-y="true" :scroll-with-animation="true" style="height: 300rpx;width: 100%;">
							<!-- <view class="specificationsli" v-for="descitem,desci in goodsInfo.goodsAttributeList" :key='desci'>
								<image src="../../static/303.png" mode=""></image>
								41英寸全单民谣缺角MS910
							</view> -->
							<view v-for="item,index in goodsInfo.goodsSpecificationsList" :key='index'
								:class="['specificationsli',guigeindex==index?'active':'']" @click="xuanzeguige(index)">
								{{item.name}}
							</view>
						</scroll-view>
					</view>
					<view class="specificationsnumber">
						<view class="numbername"> 数量 </view>
						<view v-if="openGoodsCount && immediately==1" class="straight">
							<image src="../../static/6681.png" mode="" @click="choodsguiges(2)"></image>
							<view class="straightnumber">
								{{openGoodsCount}}
							</view>
							<image src="../../static/6682.png" mode="" @click="choodsguiges(1)"></image>
						</view>
						<view v-if="immediately === 2" class="straight">
							<image src="../../static/6681.png" mode="" @click="decreaseOpenGoodsCount"></image>
							<view class="straightnumber">
								{{ openGoodsCounta }}
							</view>
							<image src="../../static/6682.png" mode="" @click="increaseOpenGoodsCount"></image>
						</view>
					</view>
				</view>
				<view class="payment">
					<button class="paymentbutton" v-if="immediately ==1" @click="choodsguiges(1)">加入购物车</button>
					<button class="paymentbutton" v-if="immediately ==2" @click="toxiadanpagept">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		memberCartList,
		addcard,
		newgetOpenId,
		getGoodsInfo,
		getShopInfo,
		getGoodsWxCode, //获取商品小程序码
		clearCart,
		addCollect, //商品收藏
		getCollectPage, ///我的收藏列表
		isCollect //判断是否是收藏商品
	} from "../../request/api.js"
	export default {
		data() {
			return {
				uid: '',
				shopinfo: {},
				shopid: '',
				goodsid: '',
				goodsInfo: {
					goodsSpecificationsList: [],
					goodDetail: ''
				},
				choodsguigeTc: false, //选择规格弹窗
				gouwucheTc: false, //购物车tc
				guigeindex: 0,
				gouwucheinfo: {
					list: [],
					chajia: 0
				},
				flagDesc: ['', '', ''],
				openGoodsCount: 0,
				denglumtk: false, //登录弹窗
				avatar: '', //头像
				name: '', //分享人
				imgs: '', //商品图
				shareimg: '', //最后的分享图
				goodsQrcode: '', //二维码
				immediately: '',
				isClickDisabled: false, //限制多次点击收藏
				redemptioncode: "",
				isCollect: 2,
				collect: '',
				xiadan: null,
				openGoodsCounta: 1,
				pictureArray: [],
				isVip: 0
			}
		},
		onLoad(options) {
			let that = this
			console.log(options, 'dx');
			that.uid = uni.getStorageSync('userInfo').id
			that.goodsid = options.id ? options.id : options.scene
			that.name = getApp().globalData.nickName
		},
		onShow() {
			let that = this
			this.isCollecta()
			if (uni.getStorageSync('userInfo')) {
				this.isVip = uni.getStorageSync('userInfo').isVip
			}
			that.gouwucheinfo = {
				list: [],
				chajia: 0
			}
			if (getApp().globalData.uid) {
				this.uid = getApp().globalData.uid
			}
			that.getgoods()
		},
		methods: {
			decreaseOpenGoodsCount() {
				this.openGoodsCounta -= 1;
			},
			increaseOpenGoodsCount() {
				this.openGoodsCounta += 1;
			},
			dial() {
				plus.share.getServices(res => {
					const wechat = res.find(i => i.id === 'weixin')
					if (wechat) {
						wechat.openCustomerServiceChat({
							corpid: "wwa4109901095808d2", //第三步获取
							url: "https://work.weixin.qq.com/kfid/kfcec94590fae8480a4"
						}, src => {
							console.log("success:")
						}, err => {
							console.log("error:")
						})
					} else {
						uni.showToast({
							title: '当前环境不支持',
							icon: "error"
						});
					}
				});
			},
			//我的收藏列表
			addCollecta(sta) {
				if (this.isClickDisabled) return; // 如果禁用点击，则不执行后续操
				this.isClickDisabled = true;
				// 禁用点击
				setTimeout(() => {
					uni.showToast({
						title: '请勿连续点击',
						icon: 'none'
					})
					this.isClickDisabled = false; // 三秒后允许点击
				}, 3000);
				addCollect({
					goodsId: this.goodsInfo.id,
					memberId: uni.getStorageSync('userInfo').id,
					status: sta,
					type: 2,
					goodsImg: this.goodsInfo.picture,
					price: this.goodsInfo.goodsSpecificationsList[0].srcPrice,
					vipPrice: this.goodsInfo.presentPrice,
					title: this.goodsInfo.name
				}).then(res => {
					console.log(res, '成功');
					if (sta == 1) {
						uni.showToast({
							title: '收藏成功',
							icon: 'none'
						})
					}
					if (sta == 2) {
						uni.showToast({
							title: '取消收藏',
							icon: 'none'
						})
					}
				})
				if (sta == 1) {
					console.log('aa');
					this.isCollect = 1
				}
				if (sta == 2) {
					console.log('aa');
					this.isCollect = 2
				}
			},
			isCollecta() {
				let that = this
				console.log(that.goodsInfo, '111111111');
				isCollect({
					goodsId: that.goodsid,
					memberId: uni.getStorageSync('userInfo').id
				}).then(res => {
					this.collect = res.result
					if (res.result == true) {
						this.isCollect = 1
					}
					if (res.result == false) {
						this.isCollect = 2
					}
				})
			},
			//超级品牌
			classificationpayment() {
				console.log('挑战');
				uni.navigateTo({
					url: '/pages/classification/payment'
				})
			},
			open(item) {
				let that = this
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
				this.choodsguigeTc = true
				this.immediately = item
				console.log(item);
				if (item == 1) {
					that.getnum()
				}
				if (item == 2) {
					that.openGoodsCounta = 1
					console.log(that.openGoodsCounta, 'shulin');
				}
				console.log(that.openGoodsCounta, 'shulin');
			},
			onClick(e) {
				uni.showToast({
					title: '列表被点击'
				})
			},
			change(e) {
				console.log(e);
			},
			format(html) {
				var GRT = [
					// img 样式
					['img', "max-width:100%;height:auto;"],
				];
				for (let i = 0; i < GRT.length; i++) {
					html = html.replace(new RegExp('<' + GRT[i][0] + '>|<' + GRT[i][0] + ' (.*?)>', 'gi'), function(word) {
						// 分析 dom 上是否带有 style=""
						if (word.indexOf('style=') != -1) {
							var regIn = new RegExp('<' + GRT[i][0] + '(.*?)style="(.*?)"(.*?)(/?)>', 'gi');
							return word.replace(regIn, '<' + GRT[i][0] + '$1style="$2 ' + GRT[i][1] + '"$3$4>');
						} else {
							var regIn = new RegExp('<' + GRT[i][0] + '(.*?)(/?)>', 'gi');
							return word.replace(regIn, '<' + GRT[i][0] + '$1 style="' + GRT[i][1] + '$2">');
						}
					});
				}
				return html;
			},
			// 去下单页面
			toxiadanpagept() {
				let that = this
				let goodsInfo = that.goodsInfo
				let guigeindex = that.guigeindex
				let guigeinfo = Object.assign({}, goodsInfo.goodsSpecificationsList[guigeindex]) // 创建一个新对象
				let goodsinfo = goodsInfo
				let a = {
					memberId: that.uid,
					// type: num,
					goodsId: goodsinfo.id,
					goodsName: goodsinfo.name,
					packFee: guigeinfo.packFee,
					picture: guigeinfo.picture ? guigeinfo.picture : goodsinfo.picture,
					price: that.isVip == 1 ? guigeinfo.price : guigeinfo.srcPrice,
					saleNum: goodsinfo.saleNum,
					shopId: that.goodsInfo.shopId,
					specId: guigeinfo.id,
					specName: guigeinfo.name,
					stock: guigeinfo.stock,
					num: that.openGoodsCounta,
					// attributeStr: strs,
					weight: guigeinfo.weight,
					// id: cardId
				}
				uni.navigateTo({
					url: '/pages/classification/payment?shopid=' + this.goodsInfo.shopId + '&boolean=' + true +
						'&a=' + JSON.stringify(a)
				})
			},
			// 去下单页面
			toxiadanpage() {
				uni.navigateTo({
					url: '/pages/classification/payment?shopid=' + this.goodsInfo.shopId + '&boolean=' + false
				})
			},
			immediatepayment() {
				this.choodsguiges(1)
				this.toxiadanpage()
			},
			// 选择规格  执行加减购物车
			choodsguiges(types) {
				let that = this
				let goodsInfo = that.goodsInfo
				let guigeindex = that.guigeindex
				let guigeinfo = Object.assign({}, goodsInfo.goodsSpecificationsList[guigeindex]) // 创建一个新对象
				let goodsinfo = goodsInfo
				let skuDesc = that.flagDesc.join(',')
				guigeinfo.originalPrice = goodsinfo.originalPrice
				guigeinfo.presentPrice = goodsinfo.presentPrice
				if (that.isVip == 0) {
					guigeinfo.price = goodsinfo.goodsSpecificationsList[guigeindex].srcPrice
				} else {
					guigeinfo.price = goodsinfo.goodsSpecificationsList[guigeindex].price
				}
				if (types == 1) {
					console.log(guigeinfo, 'sss');
					that.resetGouwuc(guigeinfo, goodsinfo, 1, skuDesc)
				}
				if (types == 2) {
					that.resetGouwuc(guigeinfo, goodsinfo, -1, skuDesc)
				}
				if (types == 3) {
					that.resetGouwuc(guigeinfo, goodsinfo, 1, skuDesc)
					// this.clearThisCart()
					this.toxiadanpage()
				}
				this.$refs.popup.close()
			},
			// 购物车中   执行加减购物车
			zengjiagoods(items, types) {
				let that = this
				let guigeinfo = {
					packFee: items.packFee,
					picture: items.picture,
					price: items.price,
					id: items.specId,
					name: items.specName,
					stock: items.stock,
					weight: items.weight
				}
				console.log(uni.getStorageSync('VIPUserInfo'), '1111');
				if (!uni.getStorageSync('VIPUserInfo').objectSid) {
					guigeinfo.price = items.srcPrice
				}
				let goodsinfo = this.goodsInfo
				let skuDesc = items.attributeStr
				if (types == 1) {
					that.resetGouwuc(guigeinfo, goodsinfo, 1, skuDesc, items.id)
				} else {
					that.resetGouwuc(guigeinfo, goodsinfo, -1, skuDesc, items.id)
				}
			},
			// 添加购物车
			resetGouwuc(guigeinfo, goodsinfo, num, strs, cardId) {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				addcard({
					memberId: that.uid,
					type: num,
					goodsId: goodsinfo.id,
					goodsName: goodsinfo.name,
					packFee: guigeinfo.packFee,
					picture: guigeinfo.picture ? guigeinfo.picture : goodsinfo.picture,
					price: guigeinfo.price,
					originalPrice: guigeinfo.originalPrice,
					presentPrice: guigeinfo.presentPrice,
					saleNum: goodsinfo.saleNum,
					shopId: that.goodsInfo.shopId,
					specId: guigeinfo.id,
					specName: guigeinfo.name,
					stock: guigeinfo.stock,
					attributeStr: strs,
					weight: guigeinfo.weight,
					id: cardId
				}).then(responts => {
					console.log(responts, "responts")
					if (responts.success) {
						setTimeout(function() {
							uni.hideLoading()
						})
						that.getgouwucinfo()
					} else {
						setTimeout(function() {
							uni.hideLoading()
						})
						setTimeout(function() {
							uni.showToast({
								title: '添加购物车：' + responts.message,
								icon: 'none'
							})
						})
					}
				}).catch(error => {
					setTimeout(function() {
						console.log(error, "error")
						uni.hideLoading()
					})
				})
			},
			// 选择的 商品属性
			xuanzeDesc(sumnum, item) {
				console.log(sumnum, item)
				let flagDesc = this.flagDesc
				this.flagDesc[sumnum] = item
				this.flagDesc = JSON.parse(JSON.stringify(flagDesc))
				this.getnum()
			},
			// 选中摸个规格
			xuanzeguige(num) {
				console.log(num)
				this.guigeindex = num
				this.getnum()
			},
			// 弹窗中是否展示  加减
			getnum() {
				console.log('数量');
				let that = this
				// if (that.choodsguigeTc) {
				let goodsInfo = that.goodsInfo
				let _guigeindex = that.guigeindex
				let _flagDescStr = that.flagDesc.join(',')
				let _openGoodsCount = 0
				let _gouwuchelist = that.gouwucheinfo.list
				console.log(_gouwuchelist, 'sp');
				_gouwuchelist.forEach(element => {
					console.log(element, "加减");
					if (element.goodsId == goodsInfo.id && element.specId == goodsInfo.goodsSpecificationsList[
							_guigeindex].id && element.attributeStr == _flagDescStr) {
						_openGoodsCount = element.num
						console.log(element.num, '1');
					}
				});
				that.openGoodsCount = _openGoodsCount
				console.log(that.openGoodsCount, '数量');
				// }
			},
			// 去登录页面
			todengluye() {
				uni.navigateTo({
					url: "../login/index"
				})
			},
			// 选择规格弹窗   开启
			choodsguigeKaiqi() {
				let that = this
				let goodsInfo = that.goodsInfo
				that.guigeindex = 0
				if (that.uid && that.uid != 0) {
					let skuDesclist = goodsInfo.goodsAttributeList
					let lists = []
					skuDesclist.forEach(elements => {
						elements.values = elements.value.split(',')
						lists.push(elements.values[0])
					})
					this.choodsguigeTc = true
					that.flagDesc = lists
					that.getnum()
				} else {
					uni.showLoading({
						title: '加载中',
					})
					that.userlogins(1)
				}
			},
			//  根据code 登录
			userlogins(typenum, index) {
				let that = this
				uni.login({
					success: res => {
						console.log(res, '登陆的code')
						newgetOpenId({
							code: res.code
						}).then(responts => {
							let infos = responts.result
							console.log(infos.memberVO)
							if (responts.success) {
								uni.hideLoading()
								if (infos.memberVO != null) {
									that.uid = infos.memberVO.id
									that.name = infos.memberVO.nickName
									that.registAgentId = infos.memberVO.siteId
									getApp().globalData.uid = infos.memberVO.id
									getApp().globalData.avatar = infos.memberVO.avatar
									getApp().globalData.nickName = infos.memberVO.nickName
									getApp().globalData.registAgentId = infos.memberVO.siteId
									getApp().globalData.openid = infos.memberVO.wxOpenid
									getApp().globalData.phones = infos.memberVO.mobile
									getApp().globalData.token = infos.token
									that.getgouwucinfo()
									if (typenum == 1) {
										that.choodsguigeKaiqi(index)
									} else if (typenum == 2) {
										that.getshareimg()
									}
								} else {
									that.denglumtk = true
								}
							} else {
								uni.hideLoading()
								uni.showToast({
									title: '获取用户信息: ' + responts.message,
									icon: 'none'
								})
							}
						}).catch(error => {
							uni.hideLoading()
							console.log(error)
						})
					}
				})
			},
			clearThisCart() {
				let that = this;
				uni.showLoading({
					title: '清空中'
				})
				clearCart({
					memberId: that.uid,
					shopId: that.goodsInfo.shopId,
				}).then(res => {
					uni.hideLoading()
					if (res.success) {
						this.gouwucheTc = false;
						that.getgouwucinfo()
					}
				}).catch(error => {
					setTimeout(function() {
						console.log(error)
						uni.hideLoading()
					})
				})
			},
			// 获取购物车信息
			getgouwucinfo() {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				memberCartList({
					shopId: that.goodsInfo.shopId,
					memberId: that.uid
				}).then(responts => {
					console.log(responts, "获取购物车")
					if (responts.success) {
						setTimeout(function() {
							uni.hideLoading()
						})
						let lengthnum = 0
						let resobj = responts.result
						let price = 0
						let chajia = 0
						let xiadan = false
						let packPrice = 0
						let dabao = true
						for (let i = 0; i < resobj.length; i++) {
							lengthnum = lengthnum + resobj[i].num * 1
							if ((resobj[i].packFee * 1) != 0) {
								dabao = false
							}
							price = (price * 1 + (resobj[i].price * 1 + resobj[i].packFee * 1) * resobj[i].num * 1)
								.toFixed(2)
							packPrice = (packPrice * 1 + resobj[i].packFee * 1 * resobj[i].num * 1).toFixed(2)
							if (packPrice == 0) {
								packPrice = 0
							}
						}
						if (dabao && resobj.length > 0) {
							price = (price * 1 + packPrice * 1).toFixed(2)
						}
						if (resobj.length > 0) {
							console.log(that.shopinfo, 22);
							// chajia = (that.shopinfo.shopTakeout.startFare * 1 - price * 1).toFixed(
							// 	2)
							if (chajia > 0) {
								xiadan = false
							} else {
								xiadan = true
							}
							that.gouwucheinfo = {
								totalMoney: price,
								chajia: chajia,
								xiadan: xiadan,
								lengthnum: lengthnum,
								list: resobj,
								packPrice: packPrice
							}
						} else {
							xiadan = false
							// chajia = that.shopinfo.shopTakeout.startFare * 1
							that.gouwucheinfo = {
								totalMoney: price,
								chajia: chajia,
								xiadan: xiadan,
								lengthnum: lengthnum,
								list: resobj,
								packPrice: 0
							}
							that.gouwucheTc = false
						}
						that.getnum()
					} else {
						setTimeout(function() {
							uni.hideLoading()
						})
						setTimeout(function() {
							uni.showToast({
								title: '获取购物车信息：' + responts.message,
								icon: 'none'
							})
						})
					}
				}).catch(error => {
					setTimeout(function() {
						console.log(error)
						uni.hideLoading()
					})
				})
			},
			getgoods() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getGoodsInfo({
					goodsId: that.goodsid
				}).then(responts => {
					console.log(responts, '商品详情')
					if (responts.success) {
						setTimeout(function() {
							uni.hideLoading()
						})
						that.shopid = responts.result.shopId
						that.goodsInfo = responts.result
						that.pictureArray = that.goodsInfo.picture.split(',').map(item => item.trim());
						that.getgouwucinfo()
						that.goodsInfo.goodDetail = that.formatRichText(that.goodsInfo.goodDetail)
						// that.isCollecta()
					} else {
						setTimeout(function() {
							uni.hideLoading()
						})
						setTimeout(function() {
							uni.showToast({
								title: '获取商品详情：' + responts.message,
								icon: 'none'
							})
						})
					}
				}).catch(error => {
					setTimeout(function() {
						uni.hideLoading()
					})
				})
			},
			// 购物车弹窗   开启
			gouwucheTcKaiqi() {
				if (this.gouwucheinfo.list.length > 0) {
					this.gouwucheTc = true
				} else {
					uni.showToast({
						title: '购物车为空',
						icon: 'none'
					})
				}
			},
			// 购物车弹窗   关闭
			gouwucheTcClose() {
				this.gouwucheTc = false
			},
		}
	}
</script>
<style lang="scss" scoped>
	swiper-item {
		height: 710rpx;
	}

	.u-collapse-content {
		color: $u-tips-color;
		font-size: 14px;
	}

	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: #f7f7f7;
	}

	.productphotos {
		width: 100%;
		height: 710rpx;

		image {
			width: 100%;
			height: 710rpx;
		}
	}

	.productcontent {
		position: relative;
		z-index: 2;
		border-radius: 20rpx 20rpx 0 0;
		top: -100rpx;
		background: #fff;
		padding: 12rpx 28rpx;
		padding-top: 70rpx;

		.name {
			color: #333333;
			font-size: 32rpx;
			font-weight: 700;
		}

		.number {
			margin-top: 26rpx;
			margin-bottom: 14rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.people {
				color: #9e9e9e;
				font-size: 24rpx;
				font-weight: 500;
				display: flex;
				align-items: first baseline;

				.hong {
					color: #d73c38;
					font-size: 36rpx;
					font-weight: 500;
					margin-right: 10rpx;
				}

				.hui {
					color: #3333334d;
					font-size: 24rpx;
					font-weight: 400;
					// text-decoration: line-through;
				}
			}

			.money {
				// width: 38rpx;
				// height: 38rpx;
				display: flex;
				align-items: center;

				image {
					width: 38rpx;
					height: 38rpx;
					margin-right: 10rpx;
				}

				.moneytext {
					color: #333333;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}

		.teacher {
			display: flex;
			padding-top: 24rpx;
			padding-bottom: 14rpx;
			// align-items: center;
			border-top: 4rpx solid #d8d8d8;
			border-bottom: 4rpx solid #d8d8d8;

			.teacherinformation {
				text-align: center;

				.teacherimg {
					width: 98rpx;
					height: 98rpx;
					margin-bottom: 10rpx;

					image {
						width: 98rpx;
						height: 98rpx;
					}
				}

				.teachername {
					color: #9e9e9e;
					font-size: 20rpx;
					font-weight: 500;
				}
			}

			.briefintroduction {
				margin-top: 20rpx;
				margin-left: 22rpx;
				color: #333333;
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		.courseclick {
			margin-top: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.list {
				// margin-bottom: 50rpx;
				border-radius: 20rpx;
				padding-bottom: 16rpx;
				display: flex;
				justify-content: space-between;
				// text-align: center;
				font-size: 36rpx;
				margin-right: 36rpx;
				color: #979797;
				font-size: 28rpx;
				font-weight: 700;

				.name {
					color: #333333;
					font-size: 24rpx;
					font-weight: 500;
					padding: 0 8rpx;
				}

				.price {
					position: relative;

					.pricea {}
				}
			}

			.select {
				margin-right: 36rpx;
				color: #333;
				display: flex;
				font-size: 28rpx;
				font-weight: 700;

				.plus {
					width: 58rpx;
					height: 6rpx;
					border-radius: 160rpx;
					background: #ff9d34;
					position: absolute;
					bottom: -15rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.information {}
	}

	.lowerpart {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 128rpx;
		z-index: 10;
		background: #ffffff;
		border-top: 4rpx solid #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 26rpx 24rpx 30rpx 0rpx;
		box-sizing: border-box;

		.lowerpartimg {
			display: flex;
			align-items: center;

			.collect {
				text-align: center;
				margin-left: 56rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.lowerparttext {
			display: flex;

			.shoppingcart {
				width: 224rpx;
				height: 84rpx;
				border-radius: 20rpx 0 0 20rpx;
				opacity: 1;
				background: #ff9c33;
				color: #ffffff;
				text-align: center;
				line-height: 84rpx;
				font-size: 28rpx;
				font-weight: 500;
			}

			.purchase {
				width: 224rpx;
				height: 84rpx;
				border-radius: 0 20rpx 20rpx 0;
				opacity: 1;
				background: #d73c38;
				color: #ffffff;
				text-align: center;
				line-height: 84rpx;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}

	.exchange {
		width: 100%;
		background: #f7f7f7;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 53rpx;
		padding-left: 58rpx;
		padding-right: 64rpx;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		position: relative;

		.fillin {
			display: flex;
			align-items: center;

			.fillinimg {
				width: 244rpx;
				height: 244rpx;
				margin-right: 22rpx;

				image {
					width: 244rpx;
					height: 244rpx;
				}
			}

			.fillinname {
				.goldcoin {
					display: flex;

					.hong {
						color: #d73c38;
						font-size: 36rpx;
						font-weight: 500;
						margin-right: 10rpx;
					}

					.hui {
						color: #3333334d;
						font-size: 24rpx;
						font-weight: 400;
						// text-decoration: line-through;
					}
				}

				.refund {
					margin-top: 14rpx;
					width: 230rpx;
					height: 38rpx;
					border-radius: 174rpx;
					background: #ffd0ce;
					color: #ffffff;
					text-align: center;
					line-height: 38rpx;
					font-size: 24rpx;
					font-weight: 400;
				}
			}
		}

		.specifications {
			padding: 20rpx 30rpx;
			background: #fff;
			border-radius: 28rpx;
			margin-top: 20rpx;

			.specificationsname {
				color: #000000;
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.specificationsul {
				.specificationsli {
					display: flex;
					align-items: center;
					border-radius: 226rpx;
					background: #f1f1f1;
					padding: 12rpx 42rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 14rpx;
					}
				}

				.active {
					font-size: 34rpx;
					background-color: #ff9c33;
					color: #fff;
				}
			}

			.specificationsnumber {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 36rpx;

				.numbername {
					color: #000000;
					font-size: 28rpx;
					font-weight: 500;
				}

				.straight {
					display: flex;
					align-items: center;

					image {
						width: 26.09rpx;
						height: 26.09rpx;
					}

					.straightnumber {
						color: #33333399;
						font-size: 24rpx;
						font-weight: 400;
						margin: 0 15rpx;
					}
				}
			}
		}

		.payment {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			// height: 124rpx;
			padding: 34rpx 0;
			box-sizing: border-box;
			background: #ffffff;

			.paymentbutton {
				width: 510rpx;
				height: 68rpx;
				border-radius: 368rpx;
				background: #ff9c33;
				color: #ffffff;
				text-align: center;
				line-height: 68rpx;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}

	button {
		border: none;
	}

	button {
		outline: none;
	}
</style>